import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Button } from 'antd';
import './WechatBind.scss';
import { API_DOMAIN } from '../../../utils/constants';

const classNames = require('classnames');

class WechatBind extends Component {
  constructor () {
    super();
    this.state = {
      bindingStatus: 0,
      countdown: 5,
      wechatBindUrl: `${API_DOMAIN}/wechat/bindauth.htm`,
    };
    this.bindWechat = this.bindWechat.bind(this);
    this.handleEnter = this.handleEnter.bind(this);
  }
  componentWillReceiveProps (nextProps) {
    this.setState({
      bindingStatus: nextProps.bindingStatus,
      countdown: nextProps.countdown,
    });
  }
  bindWechat () {
    const account = JSON.parse(window.sessionStorage.getItem('account'));
    const passportId = account.id;
    window.location.href = `${this.state.wechatBindUrl}?passportId=${passportId}`;
  }
  handleEnter () {
    this.props.history.push('/dashboard');
  }
  render () {
    const { bindingStatus } = this.state;
    const wechatBindClassName = classNames({ hide: bindingStatus === 1 || bindingStatus === 2 });
    const bindSuccessClassName = classNames({ hide: bindingStatus === 0 || bindingStatus === 2 });
    const bindFailureClassName = classNames({ hide: bindingStatus === 0 || bindingStatus === 1 });
    return (
      <div className="wechatBind">
        <div className={wechatBindClassName}>
          <img src="https://files.pansheng.com/web/image-wechat01.png" alt="" />
          <p className="title">您还未绑定微信账号</p>
          <p className="prompt">绑定您的微信账户之后，才能进行更多操作</p>
          <Button size="large" type="primary" onClick={this.bindWechat}>绑定微信</Button>
        </div>
        <div className={bindFailureClassName}>
          <img src="https://files.pansheng.com/web/icon_wrongmark.png" alt="" />
          <p className="title failure">绑定失败</p>
          <p className="prompt">微信账户绑定失败，请重试</p>
          <Button size="large" type="primary" onClick={this.bindWechat}>重新绑定</Button>
        </div>
        <div className={bindSuccessClassName}>
          <img src="https://files.pansheng.com/web/icon-tick01.png" alt="" />
          <p className="title">绑定成功</p>
          <p className="prompt">您已成功绑定微信账户，{this.state.countdown}S 后自动进入</p>
          <Button size="large" type="primary" onClick={this.handleEnter}>立即进入</Button>
        </div>
      </div>
    );
  }
}

WechatBind.propTypes = {
  bindingStatus: PropTypes.number.isRequired,
  history: PropTypes.object.isRequired,
  countdown: PropTypes.number, // eslint-disable-line
};

export default withRouter(WechatBind);
